<script setup>
	import {
		Document,
		Menu as IconMenu,
		Setting,
	} from '@element-plus/icons-vue'

	const handleOpen = (key, keyPath) => {}
	const handleClose = (key, keyPath) => {
		console.log(key, keyPath)
	}
</script>

<template>
	<el-aside width="200px">
		<el-menu
			class="el-menu-vertical-demo"
			:router="true"
			@open="handleOpen"
			@close="handleClose">
			<el-menu-item index="/home/manager/handleOrder">
				<el-icon><icon-menu /></el-icon>
				<span>订单处理</span>
			</el-menu-item>
			<el-menu-item index="/home/manager/managematerial">
				<el-icon><document /></el-icon>
				<span>原材料管理</span>
			</el-menu-item>
			<el-menu-item index="/home/manager/managemerchants">
				<el-icon><document /></el-icon>
				<span>商户管理</span>
			</el-menu-item>
			<el-sub-menu index="3">
				<template #title>
					<el-icon><setting /></el-icon>
					<span>个人中心</span>
				</template>
				<el-menu-item-group title="">
					<el-menu-item index="/home/manager/avatar">
						头像
					</el-menu-item>
					<el-menu-item index="/home/manager/password">
						修改密码
					</el-menu-item>
				</el-menu-item-group>
			</el-sub-menu>
		</el-menu>
	</el-aside>
	<el-main>
		<router-view></router-view>
	</el-main>
</template>

<style scoped>
	/* 头 */
	.layout-container-demo .el-header {
		position: relative;
		background-color: #c6e2ff;
		color: var(--el-text-color-primary);
	}
	.layout-container-demo .toolbar {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		right: 20px;
	}
	.el-dropdown-link {
		cursor: pointer;
		color: var(--el-color-primary);
		display: flex;
		align-items: center;
	}

	/* 尾 */
	.layout-container-demo .el-footer {
		position: relative;
		background-color: #c6e2ff;
	}
	/* 侧边 */
	.layout-container-demo .el-aside {
		color: var(--el-text-color-primary);
	}
	.el-menu-vertical-demo {
		height: 100%;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
		min-height: 400px;
	}
	/* 内容 */
	.layout-container-demo .el-main {
		padding: 0;
	}
</style>
